<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title></title>
</head>
<body>
<!--<svg width="400" height="300" viewbox="0 0 200 200">
				<defs>
								<clipPath id="cut-off-bottom">
								<rect x="0" y="0" width="200" height="100"></rect>
								</clipPath>
				</defs>
<circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)"></circle>

</svg>-->

<svg>
				<defs>
				<linearGradient id="Gradient">
				<stop offset="0" stop-color="white" stop-opacity="0"></stop>
				<stop offset="1" stop-color="white" stop-opacity="1"></stop>
				</linearGradient>
				<mask id="Mask">
				<rect x="0" y="0" width="200" height="200" fill="url(#Gradient)"></rect>
				</mask>
				</defs>
				<rect x="0" y="0" width="200" height="200" fill="green"></rect>
				<rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)"></rect>
</svg>
</body>
</html>
